<template>
  <div class="bottomMusic">
    <transition name="fade">
      <div class="mask" v-if="show" @click.stop="hideBottomMusic"></div>
    </transition>
    <transition name="slide">
      <div class="musicList" v-if="show" >
        <div class="title">
          播放列表：
          <b class="oprator" @click.stop="clearAll"><i class="icon-delete"></i>清空列表</b>
        </div>
        <div class="music-bar" v-for="(item,index) in musicList"  :key="item.id" @click="playMusic(item)">
          <div class="num">
            <span v-if="item.id != curMusic.id">{{index}}</span>
            <i v-if="item.id == curMusic.id" class="icon-volume-medium" :class="{'red':show}" ></i>
          </div>
          <div class="music-inner-bar">
            <p class="name">{{item.name}}</p>
            <p class="singer">{{item.singer}}</p>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import store from '../../store'
  export default {
    name: "bottom-music",
    computed:{
      show(){
        return store.getters.getPlayingInfo.show;
      },
      musicList(){
        return store.getters.getPlayingInfo.list;
      },
      curMusic(){
        return store.getters.getCurMusic;
      },
      isPlaying(){
        return store.getters.getPlay;
      }
    },
    methods:{
      hideBottomMusic(){
        store.dispatch('set_playingShow',false);
      },
      playMusic(obj){
        store.dispatch('set_curMusic',obj);
        store.dispatch('play');
      },
      clearAll(){
        store.dispatch('set_playingList',{});
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../../static/style/public';
  $musicBarHeight:60px;
  $numSize:20px;
  $maxHeight:350px;
  $titleHeight:25px;
  .red{
    color:$primaryColor;
  }
  .bottomMusic{

    .mask {
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: $bottomHeight;
      z-index: 100;
      background-color: $maskBackground;
      &.fade-leave-to, &.fade-enter-to {
        transition: all 0.5s;
      }
      &.fade-enter {
        opacity: 0;
      }
      &.fade-enter-to {
        opacity: 1;
      }
      &.fade-leave-to {
        opacity: 0;
      }
    }
    .musicList {
      display: flex;
      flex-direction: column;
      position: absolute;
      z-index: 101;
      left: 0px;
      right: 0px;
      max-height: $maxHeight;
      overflow: auto;
      bottom: $bottomHeight;
      background-color: white;
      &.slide-enter{
        transform: translate3d(0,150%,0);
      }
      &.slide-enter-to,&.slide-leave-to{
        transition:all 0.5s;
      }
      &.slide-leave-to{
        transform:translate3d(0,150%,0);
      }
      .title {
        padding: 15px 25px;
        font-weight: 600;
        color: $primaryColor;
        .oprator {
          position: absolute;
          right: 20px;
          color: $grey;
          border: 0px solid black;
          padding: 2px;
          border-radius: 10px;
          &:active {
            background-color: $lightGrey;
          }
        }
      }

      .music-bar {
        position: relative;
        height: $musicBarHeight;
        .num, .menu-block {
          @include flex-center;
          width: $musicBarHeight;
          height: $musicBarHeight;
          font-size: $numSize;
          color: $grey;
        }
        .music-inner-bar {
          display: flex;
          position: absolute;
          top: 0px;
          bottom: 0px;
          left: $musicBarHeight;
          right: 0px;
          justify-content: center;
          flex-direction: column;
          border-bottom: 1px solid $lightGrey;
          .name {
            font-size: 14px;
          }
          .singer {
            font-size: 12px;
            color: $grey;
          }
        }
      }
    }
  }
</style>